<template>
  <view class="flex">
    <a-button @click="handleClick('info')">Info Message</a-button>
    <a-button @click="handleClick('success')">Info Message</a-button>
    <a-button @click="handleClick('warning')">Info Message</a-button>
    <a-button @click="handleClick('error')">Info Message</a-button>

    <a-button @click="handdonghua('error')">我开始东湖效果</a-button>

    <a-transition :value="donghuaflog" name="fade">
      <a-button>hello</a-button>
    </a-transition>

    <a-message ref="message"></a-message>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const message = ref();
const show = ref(false);

const donghuaflog = ref(false);

function handdonghua() {
  donghuaflog.value = !donghuaflog.value;
}

const handleClick = (type) => {
  //   message.info("This is a message");
  show.value = true;
  message.value.show({
    title: "This is an info message",
    type: type,
  });
};
</script>

<style>
.flex {
  padding: 20px;
}
</style>
